
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      * {
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
      .textWrap{
        cursor: pointer;
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <div class="row-fluid">
        <div id="map_canvas" class="span10 offset1 well" style="height:500px;">
          <svg height="460" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
            <g>
              <!--主线部分-->
              <path class="mainLine" fill="none" stroke="#C0392B" d="M435,0L435,500" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
              <!-- 分支1-->
              <path class="branch" fill="none" stroke="#2ECC71" d="M435,440L400,435L400,380L365,375L370,373L369,379L365,375L369,377" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
              <circle class="mainPoint" cx="435" cy="440" r="5" stroke="#fff" stroke-width="2" fill="#C0392B"></circle>
              <path class="textArrow" stroke="none" fill="#7F8C8D" d="M365,375L355,380L355,370Z" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);fill-opacity: 0.5;"></path>
              <rect x="267" y="350" width="150" height="50" r="4" rx="4" ry="4" fill="none" stroke="#7F8C8D" fill-opacity="0.5" transform="matrix(1,0,0,1,-62,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 0.5;"></rect>
              <text dx="207" dy="350" style="fill:red;">Several lines:
                <tspan dx="-90" dy="20">First line.</tspan>
                <tspan x="267" y="70">Second line.</tspan>
              </text>
            </g>
          </svg>

        </div>
      </div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="jquery-1.8.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="http://api.map.baidu.com/api?v=1.5&ak=6d65c2ff238cb812f003e12b320ba088" type="text/javascript"></script> 
  </body>
</html>
